<template>
    <div class="dragbox" ref="box">
        <div class="dragTop">
            <slot name="dragTopSlot"></slot>
        </div>
        <div class="dragresize" title="收缩侧边栏">
        </div>
        <div class="dragBottom">
            <slot name="dragBottomSlot"></slot>
        </div>
    </div>
</template>
<script>
    import {
        defineComponent,
        reactive,
        toRefs,
        onMounted,
        watchEffect,
        defineProps
    } from "vue";
    import usePagesStore from "@/store/modules/pages";
    const pagesStore = usePagesStore();
    export default defineComponent({
        props: {
            optionsquery: {
                type: Number,
                default: () => undefined,
            },
        },
        setup(props) {

            const state = reactive({
                optionsquery:undefined
            });
            onMounted(() => {
                dragControllerDiv()
            })

            function dragControllerDiv() {
                var resize = document.getElementsByClassName('dragresize');
                var left = document.getElementsByClassName('dragTop');
                var mid = document.getElementsByClassName('dragBottom');
                var box = document.getElementsByClassName('dragbox');
                for (let i = 0; i < resize.length; i++) {
                    // 鼠标按下事件
                    resize[i].onmousedown = function (e) {
                        //颜色改变提醒
                        resize[i].style.background = '#818181';
                        var startY = e.clientY;
                        resize[i].top = resize[i].offsetTop;
                        // 鼠标拖动事件
                        document.onmousemove = function (e) {
                            var endY = e.clientY;
                            var moveLen = resize[i].top + (endY -
                                startY); // （endY-startY）=移动的距离。resize[i].left+移动的距离=左边区域最后的宽度
                            var maxT = box[i].clientHeight - resize[i]
                                .offsetHeight; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度
                            if(state.optionsquery==1){
                                if (moveLen < document.getElementsByClassName('querycss')[0].clientHeight +
                                    100 + 50) moveLen = document.getElementsByClassName('querycss')[0]
                                    .clientHeight + 100 + 60; // 上边区域的最小宽度为32px
                            }else{
                                if (moveLen <  150) moveLen = 150; // 上边区域的最小宽度为32px
                            }
                            if(state.optionsquery==2){
                                if (moveLen > maxT - (document.getElementsByClassName('querycss')[0].clientHeight +
                                100 + 50)) moveLen = maxT - (document.getElementsByClassName('querycss')[0].clientHeight +
                                100 + 50);
                            }else{
                                if (moveLen > maxT - 146) moveLen = maxT - 146; //下边区域最小宽度为150px
                            }
                            resize[i].style.top = moveLen; // 设置左侧区域的宽度
                            for (let j = 0; j < left.length; j++) {
                                left[j].style.height = moveLen + 'px';
                                mid[j].style.height = (box[i].clientHeight - moveLen - 10) + 'px';
                            }
                        };
                        // 鼠标松开事件
                        document.onmouseup = function (evt) {
                            //颜色恢复
                            resize[i].style.background = '#fff';
                            document.onmousemove = null;
                            document.onmouseup = null;
                            resize[i].releaseCapture && resize[i]
                                .releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
                        };
                        resize[i].setCapture && resize[i].setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
                        return false;
                    };
                }
            }
            watchEffect(() => {
                state.optionsquery=props.optionsquery
            })
            return {
                props,
                ...toRefs(state),
            };
        },
    });
</script>
<style lang="scss" scoped>
    .dragbox {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /*左侧div样式*/
    .dragTop {
        width: 100%;
        /*左侧初始化宽度*/
        height: 58%;
    }

    /*拖拽区div样式*/
    .dragresize {
        cursor: row-resize;
        height: 4px;
        border-radius: 2px;
        width: 40px;
        margin: 4px auto;
        background-color: #fff;
        z-index: 999;
    }

    /*拖拽区鼠标悬停样式*/
    .dragresize:hover {
        color: #444444;
    }

    /*右侧div'样式*/
    .dragBottom {
        width: 100%;
        /*右侧初始化宽度*/
        height: 40%;
    }
</style>